<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>多快好省，购物上京东！</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 顶部提示内容开始 -->
    <div class="top_tips">
        <div>
            <img src="images/close.png" alt="">
        </div>
        <div>
            <img src="images/logo1.png">
        </div>
        <div>打开京东App，购物更轻松</div>
        <div>立即打开</div>
    </div>
    <!-- 顶部提示内容结束 -->
    <!-- 搜索框区域 开始 -->
    <div class="search-box">
        <div class="search-left">
            <span></span>
        </div>
        <div class="search">
            <span></span>
            <i></i>
            <div class="input">
                <input type="text" placeholder="魅族手机">
            </div>
        </div>
        <div class="login">登录</div>
    </div>
    <!-- 搜索框区域 结束 -->
    <!-- main区域开始 -->
    <main class="content">
        <div class="banner">
            <!-- 利用了一个标签的背景制作了大盒子的背景效果 -->
            <div class="banner_bg"></div>
            <ul>
                <li><a href="#"><img src="images/banner01.dpg" alt=""></a></li>
                <li><a href="#"><img src="images/banner01.dpg" alt=""></a></li>
                <li><a href="#"><img src="images/banner01.dpg" alt=""></a></li>
            </ul>
            <div class="banner_pos">
                <span class="current"></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <!-- 优惠活动区域 -->
        <div class="coupon">
            <a href="#"><img src="images/banner_bottom_01.dpg" alt=""></a>
            <a href="#"><img src="images/banner_bottom_02.dpg" alt=""></a>
            <a href="#"><img src="images/banner_bottom_03.dpg" alt=""></a>
        </div>
        <!-- 优惠活动区域结束 -->
        <!-- 导航开始 -->
        <nav>
            <div class="mall_nav">
                <a href="#">
                    <img src="images/nav01.webp" alt="">
                    <span>京东超市</span>
                </a>
                <a href="#">
                    <img src="images/nav02.webp" alt="">
                    <span>数码电器</span>
                </a>
                <a href="#">
                    <img src="images/nav03.webp" alt="">
                    <span>京东服饰</span>
                </a>
                <a href="#">
                    <img src="images/nav04.webp" alt="">
                    <span>京东生鲜</span>
                </a>
                <a href="#">
                    <img src="images/nav05.webp" alt="">
                    <span>京东超市</span>
                </a>
                <a href="#">
                    <img src="images/nav06.webp" alt="">
                    <span>充值缴费</span>
                </a>
                <a href="#">
                    <img src="images/nav07.webp" alt="">
                    <span>9.9元9元拼</span>
                </a>
                <a href="#">
                    <img src="images/nav08.webp" alt="">
                    <span>领券</span>
                </a>
                <a href="#">
                    <img src="images/nav09.webp" alt="">
                    <span>领金贴</span>
                </a>
                <a href="#">
                    <img src="images/nav10.webp" alt="">
                    <span>PLUS会员</span>
                </a>
            </div>
            <div class="nav_pos">
                <span class="current"></span>
                <span></span>
                <span></span>
            </div>
        </nav>
        <!-- 导航结束 -->
        <!-- 新人专享 -->
        <div class="new_member">
            <a href="#"><img src="images/new1.dpg" alt=""></a>
            <a href="#"><img src="images/new2.dpg" alt=""></a>
        </div>
        <!-- 新人专享结束 -->
        <!-- 精选好物区域 -->
        <div class="good_item">
            <div class="container">
                <a href="#">
                    <span>读物精选</span>
                    <p>让生活更充实</p>
                    <div class="img_c">
                        <img src="images/jx01.dpg" alt="">
                        <img src="images/jx02.dpg" alt="">
                    </div>
                </a>
                <a href="#">
                    <span>车漆养护</span>
                    <p>DIY养护爱车漆面</p>
                    <div class="img_c">
                        <img src="images/jx03.dpg" alt="">
                        <img src="images/jx04.dpg" alt="">
                    </div>
                </a>
                <a href="#">
                    <span>亲子共读</span>
                    <p>最美陪伴</p>
                    <div class="img_c">
                        <img src="images/jx05.dpg" alt="">
                    </div>
                </a>
                <a href="#">
                    <span>潮流女装</span>
                    <p>靓丽女人</p>
                    <div class="img_c">
                        <img src="images/jx06.dpg" alt="">
                    </div>
                </a>
                <a href="#">
                    <span>音乐时光</span>
                    <p>文娱滋养</p>
                    <div class="img_c">
                        <img src="images/jx07.dpg" alt="">
                    </div>
                </a>
                <a href="#">
                    <span>办公助手</span>
                    <p>办公室好物</p>
                    <div class="img_c">
                        <img src="images/jx08.dpg" alt="">
                    </div>
                </a>
            </div>
        </div>
        <!-- 精选好物区域结束 -->
        <!-- 商品区 开始-->
        <ul class="shop">
            <li>
                <div class="shop_c">
                    <img class="shop_img" src="images/shop01.webp" alt="">
                    <span class="shop_descript"><img src="images/jdwl.png" alt=""> 买镜片送镜框）依视路 ESSILOR 钻晶A+依视美1.67非球面镜片 2片装 555100AEU0 现货 1000度以内</span>
                    <p>
                        <span class="money">$ 177</span>
                        <span class="quick_pay">闪购</span>
                        <span class="like_shop">看相似</span>
                    </p>
                </div>
            </li>
            <li>
                <div class="shop_c">
                    <img class="shop_img" src="images/shop01.webp" alt="">
                    <span class="shop_descript"><img src="images/jdwl.png" alt=""> 买镜片送镜框）依视路 ESSILOR 钻晶A+依视美1.67非球面镜片 2片装 555100AEU0 现货 1000度以内</span>
                    <p>
                        <span class="money">$ 177</span>
                        <span class="quick_pay">闪购</span>
                        <span class="like_shop">看相似</span>
                    </p>
                </div>
            </li>
        </ul>
        <!-- 商品区 结束-->
    </main>
    <!-- main区域结束 -->
    <!-- bottom_nav区域 -->
    <div class="bottom_nav">
        <a href="#">
            <img src="images/b-nav01.png" alt="">
        </a>
        <a href="#">
            <img src="images/b-nav02.png" alt="">
        </a>
        <a href="#">
            <img src="images/b-nav03.png" alt="">
        </a>
        <a href="#">
            <img src="images/b-nav04.png" alt="">
        </a>
        <a href="#">
            <img src="images/b-nav05.png" alt="">
        </a>
    </div>
    <!-- bottom_nav区域结束 -->
</body>
</html>